<template>
	<view class="receiving_address">
		<scroll-view scroll-y class="receiving_address_scroll" v-if="dataSouse?.length > 0">
			<view class="receiving_address_item" v-for="item in dataSouse" :key="item?.id">
				<view class="receiving_address_item_1">
					<text>{{item?.consignee}}</text><text>{{maskPhoneNumber(item?.phoneNumber)}}</text>
				</view>
				<view class="receiving_address_item_2"><template
						v-if="item?.location">{{item?.location?.replaceAll(',','')}}</template>{{item?.address}}
				</view>
				<view class="receiving_address_item_3" @click.stop="handleDefault(item)">
					<view>
						<image src="http://qianxueapplet.suoeryun.com/addressselection.png"
							v-if="item?.izDefault === '1'">
						</image>
						<image src="http://qianxueapplet.suoeryun.com/addressnotselected.png" v-else>
						</image>
						<text>设为默认地址</text>
					</view>
					<view>
						<button @click.stop="handleAddAddress(item)">编辑</button>
						<button @click.stop="handleDel(item)">删除</button>
					</view>
				</view>
			</view>
		</scroll-view>
		<u-empty v-else marginTop="100" text="您还没有收货地址哟～" icon="http://qianxueapplet.suoeryun.com/zwshdz.png"></u-empty>
	</view>
	<view class="btm_btm">
		<view class="btm_btm_row">
			<button class="row_btn" @click.stop="handleAddAddress(null)">添加新地址</button>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { onMounted, onUnmounted, ref } from 'vue';
	import { qxWxUserDeliveryAddressList, qxWxUserDeliveryAddressEdit, qxWxUserDeliveryAddressDel } from '@/config/goodStuff.api';
	import { maskPhoneNumber } from '@/util/index';

	const dataSouse = ref([]);

	onMounted(() => {
		// 添加新地址回调
		uni.$on('updataAddressList', item => {
			loadData();
		});
		loadData();
	})

	onUnmounted(() => {
		// 销毁-添加新地址回调
		uni.$off('updataAddressList');
	})

	/**
	 * 加载数据
	 */
	async function loadData() {
		const res = await qxWxUserDeliveryAddressList({ pageNo: 1, pageSize: 9999 });
		dataSouse.value = res?.records;
	}

	/**
	 * 添加新地址
	 */
	function handleAddAddress(item) {
		uni.$u.route('/pages/goodStuff/editAddress', { id: item ? item?.id : '' });
	}

	/**
	 * 删除
	 */
	function handleDel(item) {
		uni.showModal({
			title: '提示',
			content: '确认是否删除？',
			confirmColor: '#FF943C',
			success: async function (res) {
				if (res.confirm) {
					await qxWxUserDeliveryAddressDel({
						id: item?.id
					});
					uni.showToast({
						icon: 'none',
						title: '删除成功！',
						success() {
							loadData();
						}
					})
				} else if (res.cancel) {
					console.log('用户点击取消');
				}
			}
		})
	}

	/**
	 * 设为默认
	 */
	async function handleDefault(item) {
		await qxWxUserDeliveryAddressEdit({ id: item?.id, izDefault: '1' });
		loadData();
		uni.showToast({
			icon: 'success',
			title: '设置成功'
		})
	}
</script>

<style lang="scss" scoped>
	.receiving_address {
		margin: 0 24rpx 24rpx 24rpx;
		padding-bottom: 70rpx;

		.receiving_address_scroll {
			height: calc(100vh - 70rpx - 24rpx);

			.receiving_address_item {
				background: #FFFFFF;
				border-radius: 12rpx;
				padding: 24rpx;
				margin-top: 24rpx;

				.receiving_address_item_1 {
					font-size: 36rpx;
					font-weight: 500;

					text {
						&:first-child {
							padding-right: 24rpx;
						}
					}
				}

				.receiving_address_item_2 {
					font-size: 28rpx;
					color: #6A6767;
					padding: 24rpx 0;
					border-bottom: 2rpx solid #F1F1F1;
				}

				.receiving_address_item_3 {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding-top: 32rpx;

					view {
						display: flex;
						align-items: center;
						font-size: 32rpx;
						color: #6A6767;

						image {
							width: 40rpx;
							height: 40rpx;
							margin-right: 16rpx;
						}
					}

					button {
						margin: 0;
						padding: 0;
						background-color: #FFFFFF;
						font-size: 32rpx;
						color: #FF943C;
						width: 118rpx;
						height: 54rpx;
						line-height: 52rpx;

						&::after {
							border: 0;
						}
					}
				}
			}

		}
	}
</style>